<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Custom Page</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.3/css/bootstrap.css">
    <style>
        body {
            padding: 20px;
        }
        #title {
            font-size: 2em;
            margin-bottom: 20px;
        }
        #changeBtn {
            margin-bottom: 20px;
        }
        #tag-list {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        #tag-list label {
            margin-right: 10px;
            margin-bottom: 10px;
        }
        #result {
            margin-top: 30px;
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 5px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.3/js/bootstrap.js"></script>
    <script>
		// const baseUrl = "http://localhost:9966/applets";
        const baseUrl = " http://43.138.27.38:9966/applets";

        $(document).ready(function() {
            // 初始化函数
            init();

            let cardInfo = {};

            // 点击“换一个”按钮时的处理函数
            $('#changeBtn').click(function() {
                changeTitleAndTags();
            });

            // 点击提交按钮时的处理函数
            $('#submitBtn').click(function() {
                submitForm();
            });
			
			

            function init() {
                // 模拟初始化接口调用
                $.post({
                    url: baseUrl + '/card/next',
                    dataType: 'json',
                    data:{},
                    success: function(res) {
					    if("0" != res.code){
                            alert(res.message);
                            return;
                        }else {
                            let data = res.data;
                            cardInfo = data;
                            $('#title').text(data.title);
                            let tagList = $('#tag-list');
                            tagList.empty();
                            if(  null != data.tags ) {
                                data.tags.forEach(tag => {

                                    var checkbox = $('<input>', {
                                        type: 'checkbox',
                                        value: tag.labelName
                                    });
                                    var label = $('<label>').text(tag.labelName);
                                    checkbox.appendTo(tagList);
                                    label.insertAfter(checkbox);
                                });
                            }
                        }
                    }
                });
            }

            function changeTitleAndTags() {
                // 模拟更换标题和标签接口调用
                init();
            }

            function submitForm() {
                console.log(cardInfo)
                // 获取选中的标签和自定义输入值
                let selectedTags = $('.tag-list input[type=checkbox]:checked').map(function() {
                    return $(this).val();
                }).get();
                let customInputValue = $('#custom-input').val();

                // 模拟提交接口调用
                $.ajax({
                    url: baseUrl + '/card/parallelUniverse',
                    type: 'POST',
                    dataType: 'json',
                    data: JSON.stringify({ cardId:cardInfo.id,labels: selectedTags, customMessage: customInputValue }),
                    contentType: 'application/json',
                    success: function(res) {
                        if("0" != res.code){
                            alert(res.message);
                            return;
                        }else {
                            let data = res.data;
                            let resultDiv = $('#result');
                            resultDiv.empty();
                            $('<p>').text(data.text).appendTo(resultDiv);
                            if (null != data.imgs && data.imgs.length > 0) {
                                $('<img>').attr('src', data.imgs[0]).appendTo(resultDiv);
                            }
                        }
                    }
                });
            }
        });
    </script>
</head>
<body>
    <div class="container">
        <h1 id="title"></h1>
        <button id="changeBtn" class="btn btn-primary">换一个</button>
        <form>
            <div id="tag-list"></div>
            <input type="text" id="custom-input" class="form-control" placeholder="自定义输入">
            <button type="button" id="submitBtn" class="btn btn-success">提交</button>
        </form>
        <div id="result"></div>
    </div>
</body>
</html>